<template>
	<div style="text-align: center;">

		<Navigation style="text-align: left;box-shadow: 0px 0px 15px rgb(168, 168, 168,0.3);"></Navigation>


		<div
			style="display: inline-block;width: 60%;margin-bottom: 20px;border-bottom: 2px rgb(168, 168, 168,0.3) solid;margin-top: 50px;">
			<input v-model="title" :maxlength="maxlength" id="title" style="height: 70px;width: 90%;border: none;outline: none;font-size: 30px;
			font-weight: bold;color: rgb(168, 168, 168);" placeholder="请输入文章标题" />
			<div
				style="height: 70px;font-size: 30px;font-weight: 900;color: rgb(168, 168, 168);width: 10%;display: inline-block;text-align: right;">
				<span style="line-height: 70px;">{{title.length}}/60</span>
			</div>
		</div>

		<div style="height: 500px;display: inline-block;width: 60%;">
			<quill-editor v-model="content" style="height: 100%;"></quill-editor>
		</div>

		<div style="display: inline-block;width: 60%;text-align: left;margin-top: 20px;">
			<div style="color: rgb(168, 168, 168);">
				<el-row>
					<el-col :span="2">
						<span>投稿预览</span>
					</el-col>
					<el-col :span="22">
						<div
							style="display: inline-block;width: 350px;height: 80px;background-color: aqua;background-color: rgb(168, 168, 168,0.1);padding: 10px;">
							<div style="display: inline-block;width: 59%;height: 100%;margin-right: 1%;">
								<div style="height: 25%;margin-bottom: 5px;background-color: rgb(168, 168, 168,0.2);">
								</div>
								<div style="height: 25%;margin-bottom: 15px;background-color: rgb(168, 168, 168,0.2);">
								</div>
								<div style="height: 25%;">
									<div
										style="display: inline-block;width: 30%;background-color: rgb(168, 168, 168,0.2);height: 100%;">
									</div>
									<div
										style="display: inline-block;width: 30%;background-color: rgb(168, 168, 168,0.2);height: 100%;float: right;">
									</div>
								</div>
							</div>
							<div
								style="display: inline-block;width: 40%;height: 100%;background-color: rgb(168, 168, 168,0.2);position: relative;">
								<!-- <img v-show="imageUrl!==''" style="width: 100%;height: 100%;" :src="imageUrl" /> -->
								<el-image v-show="imageUrl!==''" style="width: 100%;height: 100%;" :src="imageUrl"
									fit="none"></el-image>
								<a href="javascript:;" style="text-decoration:none;" @click="addImage()">
									<div
										style="position: absolute;padding: 2px;bottom: 0;right: 0;font-size: 10px;background-color: rgb(0, 0, 0,0.3);color: #FFFFFF;">
										<i class="el-icon-edit-outline" style="margin-right: 2px;"></i>添加封面
									</div>
								</a>
							</div>
						</div>
						<div style="font-size: 12px;">
							文件大小≤1MB，上传大于1275*680尺寸的封面图片
						</div>
					</el-col>
				</el-row>


				<!-- 				<el-row style="margin-top: 10px;">
					<el-col :span="2">
						<span>选择标签</span>
					</el-col>
					<el-col :span="22">
						<el-select v-model="value" filterable placeholder="请选择"></el-select>
					</el-col>
				</el-row> -->

				<div style="margin-top: 10px;">
					<div>
						<el-button type="success" plain>预览文章</el-button>
						<el-button type="primary" plain @click="submitArticle">提交文章</el-button>
					</div>
				</div>

			</div>
		</div>

		<br>
		<input type="file" style="opacity: 0;" id="fileImage" @change="uploads" />
		<BottomNavigation style="margin-top: 50px;"></BottomNavigation>

		<div align="left">
			<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
				<Article></Article>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import Navigation from "../components/Navigation"
	import BottomNavigation from "../components/BottomNavigation"
	import Article from "../components/Article"
	export default {
		components: {
			Navigation,
			BottomNavigation,
			Article
		},
		created() {
			var imageUrl = sessionStorage.getItem("imageUrl");
			var content = sessionStorage.getItem("content");
			var title = sessionStorage.getItem("title");
			if (imageUrl !== null || content !== null || title !== null) {
				this.$confirm('是否使用上一次未完成的文章', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					if (imageUrl !== null) {
						this.imageUrl = imageUrl;
					}
					if (content !== null) {
						this.content = content;
					}
					if (title !== null) {
						this.title = title;
					}
				}).catch(() => {
					sessionStorage.removeItem('imageUrl');
					sessionStorage.removeItem('content');
					sessionStorage.removeItem('title');
				});
			}
		},
		watch: {
			imageUrl: {
				handler(newVal) {
					sessionStorage.setItem("imageUrl", newVal);
				},
				deep: true
			},
			content: {
				handler(newVal) {
					sessionStorage.setItem("content", newVal);
				},
				deep: true
			},
			title: {
				handler(newVal) {
					sessionStorage.setItem("title", newVal);
				},
				deep: true
			}
		},
		data() {
			return {
				content: '',
				title: "",
				maxlength: 60,
				imageUrl: "",
				// value: "",
				// isCollapse: true,
				dialogFormVisible: false
			}
		},
		methods: {
			submitArticle() {
				var content = this.content;
				var title = this.title;
				var imageUrl = this.imageUrl;
				if (content === "") {
					this.$message.error('请至少输入一个内容');
				} else {
					if (title === "") {
						this.$message.error('请输入一个标题');
					} else if (title.length > 60) {
						this.$message.error('标题长度不合法');
					} else {
						if (imageUrl === "") {
							this.$message.error('请添加封面');
						} else {
							var formData = new FormData();
							formData.append('content', content);
							formData.append('cover_photo', imageUrl);
							formData.append('title', title);

							// axios.post("api/ArticleAction/articleSubmission", formData)
							// 	.then((res) => {

							// 	})
						}
					}
				}
			},
			addImage() {
				var fileImage = $("#fileImage").click();
			},
			uploads(event) {
				const file = event.target.files[0];
				// 检查文件类型，判断是否是图片
				const imageTypes = ['image/jpeg', 'image/png', 'image/gif'];
				if (!imageTypes.includes(file.type)) {
					this.$message.error('请选择图片文件');
					return;
				}

				// 检查文件大小，判断是否小于1MB (1024KB)
				const maxSizeKB = 1024;
				if (file.size > maxSizeKB * 1024) {
					this.$message.error('上传封面大小不能超过 1MB!');
					return;
				}

				const mythis = this;

				const reader = new FileReader();
				reader.onload = (e) => {
					const MAX_WIDTH = 1275;
					const MAX_HEIGHT = 680;

					const img = new Image();
					img.onload = function() {

						const width = img.width;
						const height = img.height;

						if (width < MAX_WIDTH || height < MAX_HEIGHT) {
							mythis.$message.error('请上传大于1275*680尺寸的封面图片');
							return
						} else {
							mythis.imageUrl = e.target.result; // 这是图片的 Base64 编码数据
						}

					};
					img.src = e.target.result;
				};
				reader.readAsDataURL(file);
			}
		}
	}
</script>

<style>
	#title::-webkit-input-placeholder {
		color: rgb(168, 168, 168);
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
</style>